<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文章管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//unpkg.com/layui@2.11.2/dist/css/layui.css" rel="stylesheet">
  <style>
    .operation-cell {
      text-align: center;
    }
    .operation-cell .layui-btn {
      margin: 0 2px;
    }
    .cover-thumb {
      width: 80px;
      height: 50px;
      object-fit: cover;
    }
  </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree">
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <div style="padding: 15px;">
      <div class="layui-card">
        <div class="layui-card-header">
          <div class="layui-row">
            <div class="layui-col-md6">
              <h2>文章列表</h2>
            </div>
            <div class="layui-col-md6" style="text-align: right;">
              <button class="layui-btn layui-btn-normal" id="btn-refresh">
                <i class="layui-icon layui-icon-refresh"></i> 刷新
              </button>
              <button class="layui-btn layui-btn-primary" id="btn-add">
                <i class="layui-icon layui-icon-add-1"></i> 添加文章
              </button>
            </div>
          </div>
        </div>
        <div class="layui-card-body">
          <div class="layui-row layui-form">
            <div class="layui-col-md3">
              <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-col-md2">
              <select name="category">
                <option value="">所有分类</option>
                <option value="1">技术文章</option>
                <option value="2">生活随笔</option>
                <option value="3">学习笔记</option>
                <option value="4">其他</option>
              </select>
            </div>
            <div class="layui-col-md2">
              <select name="status">
                <option value="">所有状态</option>
                <option value="published">已发布</option>
                <option value="draft">草稿</option>
              </select>
            </div>
            <div class="layui-col-md2">
              <button class="layui-btn layui-btn-normal" id="btn-search">
                <i class="layui-icon layui-icon-search"></i> 搜索
              </button>
            </div>
          </div>
          
          <table class="layui-table" id="article-table" lay-filter="article-table"></table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 表格操作列模板 -->
<script type="text/html" id="table-operation">
  <div class="operation-cell">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">
      <i class="layui-icon layui-icon-delete"></i> 删除
    </a>
    <a class="layui-btn layui-btn-xs" lay-event="view">
      <i class="layui-icon layui-icon-read"></i> 查看
    </a>
  </div>
</script>

<!-- 状态列模板 -->
<script type="text/html" id="status-templet">
  {{# if(d.status === 'published'){ }}
    <span class="layui-badge layui-bg-green">已发布</span>
  {{# } else { }}
    <span class="layui-badge">草稿</span>
  {{# } }}
</script>

<script src="//unpkg.com/layui@2.11.2/dist/layui.js"></script>
<script>
// 初始化数据存储
function initArticleStorage() {
  if (localStorage.getItem('articles') === null|| localStorage.getItem('articles') === '[]') {
    // 如果没有数据，则添加一些示例数据
    var demoData = [
      {
        id: 1,
        title: 'LayUI使用教程',
        category: '1',
        cover: './images/logo5.png',
        summary: 'LayUI框架的基础使用教程',
        content: '<p>这里是文章内容...</p>',
        status: 'published',
        createTime: Date.now(),
        updateTime: '2025-01-01T10:00:00Z'
      },
      {
        id: 2,
        title: 'JavaScript高级技巧',
        category: '1',
        cover: './images/logo4.png',
        summary: '分享一些JavaScript的高级使用技巧',
        content: '<p>这里是文章内容...</p>',
        status: 'published',
        createTime: Date.now(),
        updateTime: '2023-01-02T11:00:00Z'
      },
      {
        id: 3,
        title: '我的旅行日记',
        category: '2',
        cover: './images/logo6.png',
        summary: '记录一次难忘的旅行经历',
        content: '<p>这里是文章内容...</p>',
        status: 'draft',
        createTime: Date.now(),
        updateTime: '2023-01-03T12:00:00Z'
      }
    ];
    localStorage.setItem('articles', JSON.stringify(demoData));
  }
}

// 获取所有文章
function getArticles() {
  return JSON.parse(localStorage.getItem('articles')) || [];
}

// 删除文章
function deleteArticle(id) {
  var articles = getArticles().filter(item => item.id !== id);
  localStorage.setItem('articles', JSON.stringify(articles));
  location.reload();
}

layui.use(['table', 'form', 'layer'], function(){
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = layui.$;
  
  // 初始化数据
  initArticleStorage();
  
  // 渲染表格
  var tableIns = table.render({
    elem: '#article-table',
    data: getArticles(),
    page: true,
    cols: [[
      {field: 'id', title: 'ID', width: 80, sort: true},
      {field: 'title', title: '标题', minWidth: 200},
      {field: 'category', title: '分类', width: 120, templet: function(d){
        var categories = {'1':'技术文章','2':'生活随笔','3':'学习笔记','4':'其他'};
        return categories[d.category] || d.category;
      }},
      {field: 'cover', title: '封面', width: 120, templet: function(d){
        return d.cover ? '<img src="'+d.cover+'" class="cover-thumb">' : '';
      }},
      {field: 'status', title: '状态', width: 100, templet: '#status-templet'},
      {field: 'createTime', title: '创建时间', width: 180, templet: function(d){
        return new Date(d.createTime).toLocaleString();
      }},
      {title: '操作', width: 220, toolbar: '#table-operation', fixed: 'right'}
    ]],
    done: function(res, curr, count){
      // 表格渲染完成后执行
    }
  });
  
  // 刷新按钮
  $('#btn-refresh').click(function(){
    tableIns.reload({
      data: getArticles()
    });
  });
  
  // 添加按钮
  $('#btn-add').click(function(){
    location.href = 'add.html';
  });
  
  // 搜索按钮
  $('#btn-search').click(function(){
    var title = $('input[name="title"]').val();
    var category = $('select[name="category"]').val();
    var status = $('select[name="status"]').val();
    
    var filteredData = getArticles().filter(function(item){
      var match = true;
      if(title && !item.title.includes(title)) match = false;
      if(category && item.category !== category) match = false;
      if(status && item.status !== status) match = false;
      return match;
    });
    
    tableIns.reload({
      data: filteredData,
      page: {curr: 1}
    });
  });
  
  // 表格工具条事件
  table.on('tool(article-table)', function(obj){
    var data = obj.data;
    
    if(obj.event === 'edit'){
      // 跳转到编辑页面
      location.href = 'article-edit.html?id=' + data.id;
    } else if(obj.event === 'delete'){
      layer.confirm('确定要删除这篇文章吗？', function(index){
        deleteArticle(data.id);
        tableIns.reload();
        layer.close(index);
      });
    } else if(obj.event === 'view'){
      // 查看详情
      layer.open({
        type: 1,
        title: data.title,
        area: ['60%', '60%'],
        content: '<div style="padding:20px;">' + 
                 '<h2>' + data.title + '</h2>' +
                 '<p>分类: ' + (data.category === '1' ? '技术文章' : data.category === '2' ? '生活随笔' : '学习笔记') + '</p>' +
                 '<p>状态: ' + (data.status === 'published' ? '已发布' : '草稿') + '</p>' +
                 '<p>创建时间: ' + new Date(data.createTime).toLocaleString() + '</p>' +
                 (data.cover ? '<p><img src="' + data.cover + '" style="max-width:100%;"></p>' : '') +
                 '<h3>摘要</h3>' +
                 '<p>' + (data.summary || '无摘要') + '</p>' +
                 '<h3>内容</h3>' +
                 '<div>' + (data.content || '无内容') + '</div>' +
                 '</div>'
      });
    }
  });
});
</script>
</body>
</html>